<template>
  <div id="goodsManage">
    <!-- 搜索框-->
    <goods-search
      :show-search="showSearch"
      @handle-query="handleQuery($event)"
      @handle-reset="handleQuery({}, true)"
    />
    <!-- 列表 -->
    <el-card shadow="never">
      <!-- 表格工具栏 -->
      <div class="toolbar">
        <!-- 左侧工具栏 -->
        <div>
          <el-button
            :disabled="checkBtnAuth(UserTypeEnum.BUSINESS)"
            :icon="Plus"
            type="success"
            @click="openAddModel"
          >
            新增
          </el-button>
          <el-button
            :disabled="
              checkBtnAuth(UserTypeEnum.BUSINESS) || removeIdList.length === 0
            "
            :icon="Delete"
            type="danger"
            @click="handleBatchDel"
          >
            删除
          </el-button>
        </div>
        <!-- 右侧工具栏 -->
        <div>
          <el-button
            :icon="Refresh"
            circle
            title="刷新"
            @click="handleQuery({}, true)"
          />
          <el-popover placement="bottom" trigger="click">
            <template #reference>
              <el-button :icon="Operation" circle title="筛选列" />
            </template>
            <el-scrollbar max-height="350px">
              <template v-for="col in cols" :key="col.props">
                <el-checkbox v-model="col.show" :label="col.label" />
              </template>
            </el-scrollbar>
          </el-popover>
          <el-button
            :icon="Search"
            circle
            title="搜索"
            @click="handleSearchShow"
          />
        </div>
      </div>
      <!-- 列表 -->
      <el-table
        :data="tableData"
        border
        highlight-current-row
        row-key="id"
        @selection-change="handleSelectionChange"
      >
        <el-table-column align="center" type="selection" width="50" />
        <el-table-column
          v-if="handleColShow('id')"
          align="center"
          label="数据Id"
          prop="id"
          show-overflow-tooltip
          width="200"
        />
        <el-table-column
          v-if="handleColShow('goodsName')"
          align="center"
          label="商品名"
          prop="goodsName"
          show-overflow-tooltip
        />
        <el-table-column
          v-if="handleColShow('mainImages')"
          align="center"
          label="商品主图"
          prop="mainImages"
          width="100"
        >
          <template #default="scope">
            <el-image
              v-if="scope.row?.mainImages.length > 0"
              :preview-src-list="scope.row.mainImages || []"
              :src="scope.row?.mainImages[0]"
              preview-teleported
              style="width: 50px"
            />
            <el-text v-else>无</el-text>
          </template>
        </el-table-column>
        <el-table-column
          v-if="handleColShow('typeId')"
          align="center"
          label="商品分类"
          prop="typeId"
          width="100"
        >
          <template #default="scope">
            {{ getGoodsTypeName(scope.row.typeId) }}
          </template>
        </el-table-column>
        <el-table-column
          v-if="handleColShow('properties')"
          align="center"
          label="商品配置"
          prop="properties"
          width="130"
        >
          <template #default="scope">
            <el-button
              size="small"
              type="primary"
              @click="viewContent(scope.row, true)"
              >查看商品配置
            </el-button>
          </template>
        </el-table-column>
        <el-table-column
          v-if="handleColShow('imageDesc')"
          align="center"
          label="图文描述"
          prop="imageDesc"
          width="130"
        >
          <template #default="scope">
            <el-button
              size="small"
              type="primary"
              @click="viewContent(scope.row, false)"
              >查看图文描述
            </el-button>
          </template>
        </el-table-column>
        <el-table-column
          v-if="handleColShow('status')"
          align="center"
          label="状态"
          prop="status"
          show-overflow-tooltip
          width="100"
        >
          <template #default="scope">
            <el-popconfirm
              :icon="InfoFilled"
              cancel-button-text="取消"
              confirm-button-text="确定"
              icon-color="#626AEF"
              title="确定要修改当前状态?"
              width="220"
              @confirm="switchStatus(scope.row)"
            >
              <template #reference>
                <el-switch
                  :model-value="scope.row.status == 1"
                  active-text="上架"
                  class="ml-2"
                  inactive-text="下架"
                  inline-prompt
                  style="
                    --el-switch-on-color: #13ce66;
                    --el-switch-off-color: #ff4949;
                  "
                />
              </template>
            </el-popconfirm>
          </template>
        </el-table-column>
        <el-table-column
          v-if="handleColShow('createTime')"
          align="center"
          label="创建时间"
          prop="createTime"
          show-overflow-tooltip
          width="200"
        />
        <el-table-column
          v-if="handleColShow('updateTime')"
          align="center"
          label="修改时间"
          prop="updateTime"
          show-overflow-tooltip
          width="200"
        />
        <el-table-column
          v-if="!checkBtnAuth(UserTypeEnum.BUSINESS)"
          align="center"
          fixed="right"
          label="操作"
          width="150"
        >
          <template #default="scope">
            <el-tooltip
              class="box-item"
              content="编辑sku"
              effect="dark"
              placement="bottom"
            >
              <el-button
                :icon="Edit"
                circle
                size="small"
                type="success"
                @click="toGoodsSku(scope.row.id)"
              />
            </el-tooltip>
            <el-tooltip
              class="box-item"
              content="编辑"
              effect="dark"
              placement="bottom"
            >
              <el-button
                :icon="Edit"
                circle
                size="small"
                type="primary"
                @click="handleEditShow(scope.row)"
              />
            </el-tooltip>
            <el-tooltip
              class="box-item"
              content="删除"
              effect="dark"
              placement="bottom"
            >
              <el-button
                :icon="Delete"
                circle
                size="small"
                type="danger"
                @click="handleDel(scope.row.id)"
              />
            </el-tooltip>
          </template>
        </el-table-column>
      </el-table>

      <!-- 分页 -->
      <el-scrollbar>
        <div class="pagination">
          <el-pagination
            :page-size="queryData.pageSize"
            :page-sizes="[10, 20, 30, 50]"
            :total="parseInt(total)"
            background
            layout="prev,pager,next,jumper,total,sizes"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
          />
        </div>
      </el-scrollbar>
    </el-card>

    <!-- 新增弹窗-->
    <el-dialog
      v-model="addVisible"
      center
      destroy-on-close
      title="商品信息新增"
      width="70%"
      @close="handleAddClose"
    >
      <!-- 滚动 -->
      <el-scrollbar max-height="60vh">
        <!-- 表单 -->
        <el-form
          ref="addFormRef"
          :model="addFormData"
          :rules="rules"
          label-width="auto"
          style="padding: 10px"
        >
          <el-row :gutter="20">
            <el-col>
              <el-form-item label="商品名" prop="goodsName">
                <el-input
                  v-model="addFormData.goodsName"
                  placeholder="请输入商品名"
                />
              </el-form-item>
            </el-col>
            <el-col>
              <el-form-item label="商品分类" prop="typeId">
                <el-cascader
                  v-model="addFormData.typeId"
                  :options="goodsTypeList"
                  checkStrictly
                  clearable
                />
              </el-form-item>
            </el-col>
            <el-col>
              <el-form-item label="商品主图" prop="mainImages">
                <upload-image :limit="5" @update:url="handleUploadUrl" />
              </el-form-item>
            </el-col>
            <el-col>
              <el-form-item label="商品属性" prop="properties">
                <el-space direction="vertical">
                  <div v-for="item in addFormData.properties" :key="item">
                    <el-space>
                      <el-input v-model="item.name" placeholder="属性名" />
                      <el-input v-model="item.value" placeholder="属性值" />
                      <el-button
                        :icon="Delete"
                        circle
                        size="small"
                        type="danger"
                        @click="removeProperties(item)"
                      />
                    </el-space>
                  </div>
                  <el-button
                    :icon="Edit"
                    size="small"
                    type="primary"
                    @click="addProperties"
                    >新增属性
                  </el-button>
                </el-space>
              </el-form-item>
            </el-col>
            <el-col>
              <el-form-item label="图文描述" prop="imageDesc">
                <el-row style="width: 100%">
                  <el-col :span="12">
                    <el-text>上传图片</el-text>
                    <el-text size="small" type="primary"
                      >(建议上传宽度为750px的图片)
                    </el-text>
                    <el-scrollbar max-height="300">
                      <upload-image
                        :limit="20"
                        show-url
                        @update:url="handleImageDesc"
                        @get:url="handleTempDesc"
                      />
                    </el-scrollbar>
                  </el-col>
                  <el-col :span="12">
                    <el-text type="primary">预览</el-text>
                    <el-scrollbar max-height="300">
                      <el-image
                        v-for="url in tempDescList"
                        :key="url"
                        :src="url"
                        alt="wu"
                        style="width: 75%; display: block"
                      />
                    </el-scrollbar>
                  </el-col>
                </el-row>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </el-scrollbar>
      <!-- 弹窗底部操作按钮 -->
      <template #footer>
        <div>
          <el-button type="primary" @click="handleAddSubmit">确 定</el-button>
          <el-button @click="handleAddClose">取 消</el-button>
        </div>
      </template>
    </el-dialog>
    <!-- 编辑商品信息弹窗-->
    <el-drawer
      v-model="editVisible"
      :before-close="handleEditClose"
      destroy-on-close
      direction="rtl"
      size="70%"
    >
      <template #header="{ titleClass }">
        <div
          :class="titleClass"
          style="text-align: center; font-size: 20px; font-weight: bold"
        >
          商品信息编辑
        </div>
      </template>
      <!-- 滚动 -->
      <el-scrollbar max-height="70vh">
        <!-- 表单 -->
        <el-form
          ref="editFormRef"
          :model="selectData"
          :rules="rules"
          label-width="auto"
          style="padding: 10px"
        >
          <el-row :gutter="20">
            <el-col>
              <el-form-item label="商品名" prop="goodsName">
                <el-input
                  v-model="selectData.goodsName"
                  placeholder="请输入商品名"
                />
              </el-form-item>
            </el-col>
            <el-col>
              <el-form-item label="商品分类" prop="typeId">
                <el-cascader
                  v-model="selectData.typeId"
                  :options="goodsTypeList"
                  checkStrictly
                  clearable
                />
              </el-form-item>
            </el-col>
            <el-col>
              <el-form-item label="商品主图" prop="mainImages">
                <upload-image
                  :limit="5"
                  :urls="selectData.mainImages"
                  @update:url="handleUploadUrlWithEdit"
                />
              </el-form-item>
            </el-col>
            <el-col>
              <el-form-item label="图文描述" prop="imageDesc">
                <el-row style="width: 100%">
                  <el-col :span="12">
                    <el-text>上传图片</el-text>
                    <el-text size="small" type="primary"
                      >(建议上传宽度为750px的图片)
                    </el-text>
                    <el-scrollbar max-height="300">
                      <upload-image
                        :limit="20"
                        :urls="selectData.imageDesc"
                        show-url
                        @update:url="handleImageDescWithEdit"
                        @get:url="handleTempDesc"
                      />
                    </el-scrollbar>
                  </el-col>
                  <el-col :span="12">
                    <el-text type="primary">预览</el-text>
                    <el-scrollbar max-height="300">
                      <el-image
                        v-for="url in tempDescList"
                        :key="url"
                        :src="url"
                        alt="wu"
                        style="width: 75%; display: block"
                      />
                    </el-scrollbar>
                  </el-col>
                </el-row>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </el-scrollbar>
      <!-- 弹窗底部操作按钮 -->
      <template #footer>
        <div>
          <el-button type="primary" @click="handleEditSumbit">确 定</el-button>
          <el-button @click="handleEditClose">取 消</el-button>
        </div>
      </template>
    </el-drawer>
    <!-- 编辑商品信息弹窗-->
    <el-drawer
      v-model="viewVisible"
      :before-close="() => (viewVisible = false)"
      destroy-on-close
      direction="rtl"
      size="40%"
    >
      <template #header="{ titleClass }">
        <div
          :class="titleClass"
          style="text-align: center; font-size: 20px; font-weight: bold"
        >
          {{ propertiesFlag > 0 ? "商品配置信息" : "商品图文描述" }}
        </div>
      </template>
      <!-- 滚动 -->
      <el-scrollbar max-height="70vh">
        <template v-if="propertiesFlag">
          <el-space direction="vertical">
            <el-descriptions :column="2" border class="margin-top" size="small">
              <el-descriptions-item
                v-for="item in selectData.properties"
                :key="item.name"
                :label-width="100"
                :width="200"
                align="center"
              >
                <template #label>
                  <el-text>
                    {{ item.name }}
                  </el-text>
                </template>
                <el-text>
                  {{ item.value }}
                </el-text>
              </el-descriptions-item>
            </el-descriptions>
            <el-space direction="vertical" size="large">
              <div v-for="item in selectData.properties" :key="item">
                <el-space>
                  <el-input v-model="item.name" placeholder="属性名" />
                  <el-input
                    v-model="item.value"
                    placeholder="属性值"
                    type="textarea"
                  />
                  <el-button
                    :icon="Delete"
                    circle
                    size="small"
                    type="danger"
                    @click="removeProperties(item, true)"
                  />
                </el-space>
              </div>
              <el-space>
                <el-button
                  :icon="Edit"
                  size="small"
                  type="success"
                  @click="addProperties(true)"
                  >新增属性
                </el-button>
                <el-button
                  :icon="Edit"
                  size="small"
                  type="primary"
                  @click="saveProperties"
                  >保存属性
                </el-button>
              </el-space>
            </el-space>
          </el-space>
        </template>
        <template v-else>
          <el-image
            v-for="url in selectData.imageDesc"
            :key="url"
            :src="url"
            alt="wu"
            style="width: 75%; display: block"
          />
        </template>
      </el-scrollbar>
    </el-drawer>
  </div>
</template>
<script lang="ts" setup>
import {
  Delete,
  Edit,
  InfoFilled,
  Operation,
  Plus,
  Refresh,
  Search,
} from "@element-plus/icons-vue";
import GoodsSearch from "@/views/back/system/goods/components/GoodsSearch.vue";
import { ref } from "vue";
import {
  GoodsControllerService,
  GoodsInsertDTO,
  GoodsPropertiesInsert,
  GoodsQueryParams,
  GoodsTypeControllerService,
  GoodsVO,
} from "@/api";

import { ElMessage, ElMessageBox } from "element-plus";
import { getIconList } from "@/util/IconUtil";
import UploadImage from "@/components/UploadImage.vue";
import { useRouter } from "vue-router";
import { GoodsTypeOption } from "@/api/models/GoodsTypeOption";
import { checkBtnAuth } from "@/util/BtnPermissionUtil";
import { UserTypeEnum } from "@/types/UserTypeEnum";

const iconList = ref();
iconList.value = getIconList();
/**
 * 查询搜索开始
 */
const queryInit = {
  pageNum: 1,
  pageSize: 10,
  beginTime: "",
  endTime: "",
  keyword: "",
};
//查询数据对象
const queryData = ref({ ...queryInit });

//查询事件
function handleQuery(query: GoodsQueryParams, reset?: boolean) {
  //处理时间函数
  if (query?.createTime) {
    queryData.value.beginTime = query.createTime[0];
    queryData.value.endTime = query.createTime[1];
  }
  if (query?.keyword) {
    queryData.value.keyword = query.keyword;
  }
  //重置页码
  if (reset) {
    queryData.value = { ...queryInit };
  }
  let data = queryData.value;
  GoodsControllerService.queryGoodsPageUsingGet(
    data.pageNum,
    data.pageSize,
    data.beginTime,
    data.endTime,
    data.keyword
  ).then((res) => {
    const { data } = res;
    total.value = data?.total || 0;
    tableData.value = data?.rows || [];
  });
}

// 页面创建时调用
handleQuery({});
//查询的数据
const total = ref<number>(0); //总条数
const tableData = ref<GoodsVO[]>([]); // 数据集合

//页面显示条数变化
function handleSizeChange(value: number) {
  queryData.value.pageSize = value;
  handleQuery({});
}

//页码变化
function handleCurrentChange(value: number) {
  queryData.value.pageNum = value;
  handleQuery({});
}

/**
 * 查询数据结束
 */

const rules = {
  goodsName: [{ required: true, message: "请输入商品名", trigger: "change" }],
  typeId: [{ required: true, message: "请选择商品分类", trigger: "change" }],
  mainImages: [
    { required: true, message: "请上传至少一张商品主图", trigger: "change" },
  ],
  properties: [
    { required: true, message: "请输入商品配置", trigger: "change" },
  ],
  imageDesc: [{ required: true, message: "请上传图文描述", trigger: "change" }],
}; // 表单规则

/**
 * 工具栏开始
 *
 */
//上传图片
function handleUploadUrl(urls: string[]) {
  addFormData.value.mainImages = [...urls];
}

function handleImageDesc(urls: string[]) {
  addFormData.value.imageDesc = [...urls];
}

//上传图片
function handleUploadUrlWithEdit(urls: string[]) {
  selectData.value.mainImages = [...urls];
}

function handleImageDescWithEdit(urls: string[]) {
  selectData.value.imageDesc = [...urls];
}

//获取临时图片
const tempDescList = ref<string[]>();

function handleTempDesc(urls: string[]) {
  tempDescList.value = [...urls];
}

//获取商品分类
const goodsTypeList = ref<Array<GoodsTypeOption>>();

function getGoodsType() {
  GoodsTypeControllerService.getGoodsTypeOptionUsingGet().then((res) => {
    goodsTypeList.value = res.data;
  });
}

function getGoodsTypeName(list: number[]) {
  if (list.length === 0) return "无";
  //查找父分类
  const goodsType: GoodsTypeOption =
    goodsTypeList.value?.find((item) => item.value === list[0]) || {};
  let str = goodsType.label;
  if (list.length > 1) {
    //查找子分类
    const ch: GoodsTypeOption =
      goodsType.children?.find((item) => item.value === list[1]) || {};
    str = str + "/" + ch.label;
  }
  return str;
}

getGoodsType();

// 1、新增开始
const init = {
  /**
   * 商品名
   */
  goodsName: "",
  /**
   * 图文描述
   */
  imageDesc: [],
  /**
   * 商品主图
   */
  mainImages: [],
  /**
   * 商品配置
   */
  properties: [
    {
      name: "",
      value: "",
    },
  ],
  /**
   * 商品分类ID
   */
  typeId: [],
};
const addVisible = ref(false); //新增弹窗显示
const addFormData = ref<GoodsInsertDTO>({ ...init }); //添加表单数据
const addFormRef = ref(); //新增表单对象
// 打开弹窗
function openAddModel() {
  addFormData.value = JSON.parse(JSON.stringify(init));
  addVisible.value = true;
}

const removeProperties = (item: GoodsPropertiesInsert, flag?: boolean) => {
  if (flag === true) {
    const index = selectData.value.properties!.indexOf(item);
    if (index !== -1) {
      selectData.value.properties!.splice(index, 1);
    }
    return;
  }
  const index = addFormData.value.properties!.indexOf(item);
  if (index !== -1) {
    addFormData.value.properties!.splice(index, 1);
  }
};

const addProperties = (flag?: boolean) => {
  console.log(flag);
  if (flag === true) {
    selectData.value.properties!.push({
      name: "",
      value: "",
    });
    return;
  }
  addFormData.value.properties!.push({
    name: "",
    value: "",
  });
};

//保存商品配置信息
function saveProperties() {
  if (selectData.value.id) {
    let data = selectData.value.properties || [];
    data = data.map((item) => {
      return {
        name: item.name,
        value: item.value,
      };
    });
    GoodsControllerService.updateGoodsPropertiesUsingPut(
      selectData.value!.id,
      data
    ).then((res) => {
      //刷新数据
      handleQuery({});
      //关闭弹窗
      viewVisible.value = false;
      ElMessage.success(res.data);
    });
  }
}

//获取商品分类信息
// function getTypeList() {
//   ClassificationControllerService.
// }

//关闭弹窗事件
function handleAddClose() {
  if (addVisible.value) {
    ElMessageBox.confirm("确定要关闭弹窗吗？")
      .then(() => {
        addVisible.value = false;
        if (addFormRef.value) {
          addFormRef.value.resetFields();
        }
      })
      .catch(() => {
        ElMessage.info("取消了关闭弹窗");
      });
  }
}

//新增提交事件
async function handleAddSubmit() {
  console.log(addFormRef.value);
  //校验
  await addFormRef.value?.validate((valid: boolean) => {
    if (valid) {
      GoodsControllerService.insertGoodsUsingPost(addFormData.value).then(
        (res) => {
          handleQuery({}, true);
          ElMessage.success(res.data);
          addVisible.value = false;
        }
      );
    }
  });
}

// 1、新增结束
// 2、批量删除开始
const selectionList = ref<Array<GoodsVO>>(); //选中的数据集合
const removeIdList = ref<number[]>([]); //选中的数据Id集合
function handleSelectionChange(value: GoodsVO[]) {
  console.log("选中的数据", value);
  selectionList.value = value;
  //获取选中的数据id
  removeIdList.value = value.map((item) => item.id!);
}

//批量删除事件
function handleBatchDel() {
  ElMessageBox.confirm(
    "确定要删除选中的" + removeIdList.value?.length + "条数据吗？",
    "警告",
    {
      confirmButtonText: "确定",
      cancelButtonText: "取消",
      type: "warning",
    }
  )
    .then(() => {
      GoodsControllerService.delGoodsUsingDelete(removeIdList.value).then(
        (res) => {
          ElMessage.success(res.data);
          handleQuery({}, true);
        }
      );
    })
    .catch(() => {
      ElMessage.info("取消删除！");
    });
}

// 2、批量删除结束
// 6、筛选列开始
//列数据
const cols = ref([
  {
    label: "数据Id",
    props: "id",
    show: false,
  },
  {
    label: "商品名",
    props: "goodsName",
    show: true,
  },
  {
    label: "商品分类",
    props: "typeId",
    show: true,
  },
  {
    label: "商品主图",
    props: "mainImages",
    show: true,
  },
  {
    label: "商品配置",
    props: "properties",
    show: true,
  },
  {
    label: "图文描述",
    props: "imageDesc",
    show: true,
  },
  {
    label: "状态",
    props: "status",
    show: true,
  },
  {
    label: "创建时间",
    props: "createTime",
    show: true,
  },
  {
    label: "修改时间",
    props: "updateTime",
    show: false,
  },
]);

//列展示处理
function handleColShow(prop: string) {
  return cols.value.filter((col) => col.props === prop)[0].show;
}

// 6、筛选列结束
// 7、搜索展示开始
//搜索展示处理
const showSearch = ref(true);

function handleSearchShow() {
  showSearch.value = !showSearch.value;
}

// 7、搜索展示结束
/**
 * 工具栏结束
 * 表格操作开始
 */

//查看内容
const viewVisible = ref(false); //查看内容弹窗标志
const propertiesFlag = ref(false);

function viewContent(data: GoodsVO, flag: boolean) {
  propertiesFlag.value = flag;
  //两层数据，用深拷贝
  selectData.value = JSON.parse(JSON.stringify(data));
  viewVisible.value = true;
}

// 1、修改商品信息状态开始
const switchStatus = (row: any) => {
  // 如果 可用  设置为 不可用  如果不可用  设置为 可用
  const status = row.status === 1 ? 0 : 1;
  GoodsControllerService.updateGoodsStaticUsingPut({
    id: row.id,
    status: status,
  }).then((res) => {
    ElMessage.success(res.data);
    handleQuery({}, true);
  });
};
// 1、修改商品信息状态结束
// 选中的数据
const selectData = ref<GoodsVO>({});
// 3、编辑商品信息内容开始
const editVisible = ref(false); //编辑弹窗显示标志
const editFormRef = ref(); //编辑表单对象
// 打开展示弹窗
function handleEditShow(row: GoodsVO, addChildren?: boolean) {
  selectData.value = !addChildren
    ? { ...row }
    : {
        parentId: row.id,
        orderNum: 1,
      };
  console.log(addChildren, selectData.value);
  editVisible.value = true;
}

//关闭展示弹窗
function handleEditClose() {
  ElMessageBox.confirm("确定要关闭吗？")
    .then(() => {
      editVisible.value = false;
      console.log("关闭了");
      if (editFormRef.value) {
        editFormRef.value.reset();
      }
    })
    .catch(() => {
      // catch error
    });
}

function handleEditSumbit() {
  editFormRef.value?.validate((valid: boolean) => {
    if (valid) {
      GoodsControllerService.updateGoodsUsingPut(selectData.value).then(
        (res) => {
          handleQuery({}, true);
          ElMessage.success(res.data);
          editVisible.value = false;
        }
      );
    }
  });
}

// 3、编辑商品信息内容结束
// 4、删除一条商品信息数据
const handleDel = (id: number) => {
  if (!id) {
    ElMessage.warning("请选择数据后再删除！");
    return;
  }
  //删除数据
  GoodsControllerService.delGoodsUsingDelete([id]).then((res) => {
    ElMessage.success(res.data);
    handleQuery({}, true);
  });
};

const router = useRouter();

function toGoodsSku(id: number) {
  router.push("/backend/goods/goods_sku/" + id);
}
</script>

<style lang="scss" scoped>
#goodsManage {
  .toolbar {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    margin-bottom: 10px;
  }

  .pagination {
    margin-top: 12px;
  }
}

.desc-width {
  width: 150px !important;
}
</style>
